<template>
  <!-- 无线滚动 -->

  <el-card class="article-card" >
    <!-- style="width: 800px; margin-left: 13%" -->
    <!-- 循环遍历文章模板 -->

    <div
      v-for="item in comtable"
      :key="item.id"
      style="padding: 0px; margin: 0px"
    >
      <!-- 右边标题和简介 -->
      <div class="article-mid">
        <router-link :to="'/home/newsinfo/' + item.id">
          <h2>
            {{ item.articleTitle }}+1
          </h2> </router-link
        ><br />
        <p class="intro">
          {{ item.articleExplain }}
        </p>
        <!-- 文章简介下四个显示的小标签 -->
        <div class="display-function">
          <el-tag size="medium" type="info" style="margin-right: 2px"
            >点赞数量:{{ item.sumPraises }}</el-tag
          >
          <el-tag size="medium" type="info" style="margin-right: 2px"
            >评论数量:{{ item.sumCom }}</el-tag
          >
          <el-tag size="medium" type="info" style="margin-right: 2px"
            >阅读数量:{{ item.sumRead }}</el-tag
          >
          <el-tag size="medium" type="info" style="margin-right: 2px"
            >发布日期:{{ item.createdTime }}</el-tag
          >
        </div>
      </div>
      <hr />
    </div>

  </el-card>
</template>
<script>
import { getTenCom } from "../api/read";
export default {
  data() {
    return {
      //文章数组
      comtable: [],
      //图片地址
      verifyCode: require("./img/125855Qm4nr.jpg"),
      clickedData: [],

      currentIndex: 0,
    };
  },
  mounted() {
    this.getQuantCom();
  },
  methods: {
    //十天评论最多的文章
    getQuantCom() {
      getTenCom()
        .then(({ data }) => {
          console.log(data);
          let newarr = data.data;
          if (newarr[0] == null) {
            let obj = {
              articleTitle: "暂无数据更新",
              articleAuthor: "",
            };
            let others = [];
            others.push(obj);
            this.comtable = others;
          } else {
            newarr.sort((old, New) => {
              return New.sumCom - old.sumCom;
            });
            console.log(newarr);
            this.comtable = newarr;
 
          }
          console.log(data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

  },

  computed: {},
};
</script>

<style scoped>
.display-function {
  color: #666;
  padding-top: 5px;
}

/* 点赞评论数量标签 */
.el-tag.el-tag--info {
  margin-left: 5px;
}
/* 首页标题靠左 */
h2 {
  display: flex;
  justify-content: flex-start !important;
}
/* 标题和简介靠右 */
.article-mid {
  float: left;
}
.img-card {
  width: 360px;
  padding: 0 !important;
}

/* 文章内容框 */
p.intro {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  height: 50px;
  margin-bottom: 8px;
  color: #666;
}
</style>